<template>
  <div>
    <el-row :gutter="20" style="margin-left: -10px; margin-right: 0" :span="22">
      <el-col :span="4"
        ><div class="grid-content bg-purple kindlt">
          绘画入门
          <hr />
          <img src="@/assets/img/矩形透明图层@3x.png" alt="" />
          <img
            src="@/assets/img/蓝色半矩形@3x.png"
            alt=""
            class="square"
          /><span>课程占比15%</span>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple kindlt">
          日系插画
          <hr />
          <img src="@/assets/img/矩形透明图层@3x.png" alt="" />
          <img
            src="@/assets/img/绿色半矩形@3x.png"
            alt=""
            class="square"
            style="width: 50px"
          /><span>课程占比30%</span>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple kindlt">
          原画设计
          <hr />
          <img src="@/assets/img/矩形透明图层@3x.png" alt="" />
          <img
            src="@/assets/img/橙色半矩形@3x.png"
            alt=""
            class="square"
            style="width: 50px"
          /><span>课程占比25%</span>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple kindlt">
          动漫设计
          <hr />
          <img src="@/assets/img/矩形透明图层@3x.png" alt="" />
          <img
            src="@/assets/img/粉色半矩形@3x.png"
            alt=""
            class="square"
          /><span>课程占比15%</span>
        </div></el-col
      >
      <el-col :span="4"
        ><div class="grid-content bg-purple kindlt">
          商业插画
          <hr />
          <img src="@/assets/img/矩形透明图层@3x.png" alt="" />
          <img
            src="@/assets/img/蓝色半矩形@3x.png"
            alt=""
            class="square"
          /><span>课程占比15%</span>
        </div></el-col
      >
      <el-col :span="2"
        ><div class="grid-content bg-purple kindlt lastkd">
          各类占比
        </div></el-col
      >
    </el-row>
    <div class="container">
      <div class="right">
        <div class="rt-top" id="main">
          <div class="left-top">
            <span>月度销售</span>
            <span>查看更多</span>
          </div>
          <hr />
        </div>
        <div class="rt-bottom">
          <div class="rt-bottom-nav">
            <span
              >跟进记录&nbsp;&nbsp;&nbsp;<span style="color: red"
                >点赞榜</span
              ></span
            >
            <span style="color: blue">管理</span>
          </div>
          <hr />
          <div class="hotsp">
            <div class="hotsp-bm">
              <img src="@/assets/img/男孩头像@3x.png" alt="" /><span
                >我爱吃鸽子</span
              >
              <p>
                真的太喜欢张苗苗老师的教学风 格了，每次听课都会很认真听课
                这次的作业交上去也是很认真的 讲解。
              </p>
            </div>
            <div class="hotsp-bm">
              <img src="@/assets/img/男孩头像@3x.png" alt="" /><span
                >我爱吃鸽子</span
              >
              <p>
                真的太喜欢张苗苗老师的教学风 格了，每次听课都会很认真听课
                这次的作业交上去也是很认真的 讲解。
              </p>
            </div>
            <div class="hotsp-bm">
              <img src="@/assets/img/男孩头像@3x.png" alt="" /><span
                >我爱吃鸽子</span
              >
              <p>
                真的太喜欢张苗苗老师的教学风 格了，每次听课都会很认真听课
                这次的作业交上去也是很认真的 讲解。
              </p>
            </div>
            <div class="hotsp-bm">
              <img src="@/assets/img/男孩头像@3x.png" alt="" /><span
                >我爱吃鸽子</span
              >
              <p>
                真的太喜欢张苗苗老师的教学风 格了，每次听课都会很认真听课
                这次的作业交上去也是很认真的 讲解。
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="left">
        <div class="left-top">
          <span>成单跟进</span>
          <span>退单中</span>
        </div>
        <div class="left-bottom">
          <ul>
            <li v-for="(item, index) in 6" :key="index">
              <div class="blue-top">
                <div class="circle">
                  <img
                    src="@/assets/img/男孩头像@3x.png"
                    alt=""
                    class="boytou"
                  />
                </div>
              </div>
              <p>赵苗苗</p>
              <p>电话:15555555555</p>
              <p>科目:游戏原画</p>
              <p>意向:游戏原画</p>
              <!-- <p>时间:2021年12月17日</p> -->
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import * as echarts from "echarts";
export default {
  data() {
    return {
      tableData: [
        {
          date: "赵苗苗",
          name: "15555555555",
          type: "QQ联系",
          address: "跟进状态",
        },
        {
          date: "赵苗苗",
          name: "15555555555",
          type: "QQ联系",
          address: "跟进状态",
        },
        {
          date: "赵苗苗",
          name: "15555555555",
          type: "微信联系",
          address: "跟进状态",
        },
        {
          date: "赵苗苗",
          name: "15555555555",
          type: "微信联系",
          address: "跟进状态",
        },
      ],
    };
  },

  setup() {
    onMounted(() => {
      var myChart = echarts.init(document.getElementById("main"));
      window.onresize = function () {
        myChart.resize();
      };
      // 绘制图表
      myChart.setOption({
        // title: {
        //   text: "Gradient Stacked Area Chart",
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        // legend: {
        //   data: ["Line 1"],
        // },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          top: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "一月",
              "二月",
              "三月",
              "四月",
              "五月",
              "六月",
              "七月",
              "八月",
              "九月",
              "十月",
              "十一月",
              "十二月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Line 1",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [4, 60, 80, 100, 80, 90, 100, 90, 70, 65, 60, 50, 40],
          },
        ],
      });
    });
  },
};
</script>

<style lang="less" scoped>
.topbar {
  width: 100%;
  height: 40px;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  div {
    width: 140px;
    height: 40px;
    background: blue;
    border-radius: 0 0 50% 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  div:nth-child(2) {
    background: white;
    color: #000;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.bg-purple {
  background: #d3dce6;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-row {
  margin-top: 30px;
  height: 130px;
  padding: 10px;
}
.kindlt {
  height: 140px;
  padding: 10px;
  img {
    width: 170px;
    height: 35px;
    margin-top: 28px;
    margin-left: 7px;
  }
  .square {
    width: 30px;
    position: absolute;
    margin-top: 28px;
    margin-left: -180px;
  }
  span {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
.lastkd {
  background: #92acf0;
  color: #fff;
  width: 50px;
}
.container {
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
}
.left {
  background: white;
  height: 419px;
  width: 49%;
  border-radius: 4px;
  .left-top {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  span:nth-child(2) {
    color: blue;
  }
  .left-bottom {
    ul {
      display: flex;
      -webkit-line-clamp: 2;
      flex-wrap: wrap;
      margin-left: 50px;
      li {
        width: 31%;
        height: 180px;
        background: white;
        margin: 5px 5px;
        box-shadow: 2px 2px 10px #909090;
        .blue-top {
          width: 100%;
          height: 70px;
          background: #446ce3;
          display: flex;
          justify-content: center;
          align-items: center;
          .circle {
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            .boytou {
              width: 40px;
              height: 40px;
            }
          }
        }
        p {
          margin-left: 20px;
          margin-top: 5px;
        }
      }
    }
  }
}
.right {
  height: 419px;
  width: 49%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .rt-top {
    background: white;
    width: 100%;
    border-radius: 4px;
    height: 200px;
    .left-top {
      display: flex;
      justify-content: space-between;
      padding: 10px;
    }
    span:nth-child(2) {
      color: blue;
    }
  }
  .rt-bottom {
    background: white;
    width: 100%;
    border-radius: 4px;
    height: 200px;
    .rt-bottom-nav {
      display: flex;
      justify-content: space-between;
      padding: 10px;
    }
    .hotsp {
      display: flex;
      .hotsp-bm {
        width: 25%;
        height: 135px;
        // background: yellow;
        margin-left: 5px;
        margin-top: 15px;
        padding: 10px;
        img {
          height: 30px;
          width: 30px;
        }
        span {
          position: absolute;
          margin-top: 8px;
          margin-left: 10px;
        }
        p {
          margin-top: 10px;
          color: #999999;
        }
      }
    }
  }
}
</style>
